import React, { useEffect} from "react";
import { Button, Table,Space } from "antd";
import ExportJsonExcel from "js-export-excel";
import { inject, observer } from 'mobx-react';
import "./../../assets/css/cusHighSeas/common.css";

 const ExportData=(props)=> {
  // data格式
  const columns = [
    {
      title: '客户名称',
      dataIndex: 'customer_name',
      render: (text) => <a href='/'>{text}</a>,
    },
    {
      title: '联系人',
      dataIndex: 'contact_name',
     
    },
    {
      title: '手机号码',
      dataIndex: 'phone_number',
    },
    {
      title: '客户来源',
      dataIndex: 'customer_source',
    },
    {
      title: '录入时间',
      dataIndex: 'entry_time',
    },
    {
      title: '最后更新',
      dataIndex: 'last_update',
    },
    {
      title: '申请人',
      dataIndex: 'user_id',
    },
    {
      title: '申请时间',
      dataIndex: 'apply_time',
    },
    {
      title: '管理',
      key:'action',
     // text即为table的所有data； record为table当前行数据
     render: (text,record) => (
      <Space size="middle"  style={{ wordWrap: 'break-word', wordBreak: 'break-word' }}>
        <button className={text.btn_status===1?"BtnPass show":"BtnPass"} >通过审核</button>
        <button className={text.btn_status===1?"BtnNo show":"BtnNo" } >拒绝审核</button>
        <button className={text.btn_status===1?"BtnApply none":"BtnApply"} >申请</button>
        <button className='BtnUpdate'>修改</button>
        <button className='BtnDel' >删除</button>
      </Space>
    ),
    }
  ];

  /**
   *  导出数据
   */
  const handleExportCurrentExcel = () => {
    let sheetFilter = Object.keys(props.cushighseaStore.CHSdata[0]);
    let sheetHeader = Object.values(props.cushighseaStore.exportData);
    // columns.forEach((item) => {
    //   sheetHeader.push(item.title);
    // });
    let option = {};
    console.log(sheetFilter);
    option.fileName = "公海列表"; //文件名
    option.datas = [
      {
        sheetData: props.cushighseaStore.CHSdata, //导出的数据
        sheetName: "sheet1", //sheet页名字
        sheetFilter: sheetFilter, //表头数据对应的sheetData数据
        sheetHeader: sheetHeader, //表格头部的标题
        columnWidths: [10, 10, 10, 10], // 列宽 1代表20像素
      },
    ];
    var toExcel = new ExportJsonExcel(option); //new
    toExcel.saveExcel(); //保存
  };
  return (
    <div className="CHStable" >
      <Button style={{margin:'6px 0'}} type="primary" onClick={() => handleExportCurrentExcel(props.cushighseaStore.CHSdata)}>
        Excel导出
      </Button>
      <Table id='CHSExport' columns={columns} dataSource={props.cushighseaStore.CHSdata} pagination={false} />
    </div>
  );
}
export default inject('cushighseaStore')(observer(ExportData))